import { updatePass } from "@/service";
import { encrypt } from "@/utils";
import { Button, Form, Input, message, Modal } from "antd";
import React, { useState } from "react";

export default function UpdatePassword(props: any) {
  const { open, close } = props;
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();

  const onCancel = () => {
    form.resetFields();
    close();
  };

  const onOk = async () => {
    try {
      // 触发表单校验
      const values = await form.validateFields();
      console.log("表单校验成功:", values);
      setConfirmLoading(true);
      // 模拟API请求
      const res = await updatePass({
        oldPass: encrypt(values?.oldPass || '') || '',
        newPass: encrypt(values?.newPass || '') || '',
      })
      messageApi.success("密码修改成功！");
      onCancel();
    } catch (error) {
      console.error("表单校验失败:", error);
    } finally {
      setConfirmLoading(false);
    }
  };

  return (
    <Modal
      title="修改密码"
      width={500}
      open={open}
      onCancel={onCancel}
      maskClosable={false}
      className="updatePassWordModal"
      confirmLoading={confirmLoading}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button 
          key="submit" 
          type="primary" 
          onClick={onOk}
          loading={confirmLoading}
        >
          确定
        </Button>,
      ]}
    >
      {contextHolder}
      <Form
        form={form}
        name="updatePassword"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item
          label="旧密码"
          name="oldPass"
          rules={[{ required: true, message: '请输入旧密码' }]}
        >
          <Input.Password placeholder="请输入当前使用的密码" />
        </Form.Item>

        <Form.Item
          label="新密码"
          name="newPass"
          rules={[
            { required: true, message: '请输入新密码' },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('oldPass') !== value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('新密码不能与旧密码相同'));
              },
            }),
          ]}
        >
          <Input.Password placeholder="请输入新密码" />
        </Form.Item>

        <Form.Item
          label="确认新密码"
          name="confirmPassword"
          dependencies={['newPass']}
          rules={[
            { required: true, message: '请再次输入新密码' },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('newPass') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入的密码不一致'));
              },
            }),
          ]}
        >
          <Input.Password placeholder="请再次输入新密码" />
        </Form.Item>
      </Form>
    </Modal>
  );
}